<template>
<!-- navigation-tab -->
  <div class="navigat">
    <div class="navigation-tab">
      <div @touchmove.prevent class="navigation-tab__nav" id="tabtop">
        <div class="navigation-tab--active" v-for="(lists,index) in list" @click="onClick(index)" :class="active===index?'navigation-active':''">
          {{ lists.title }}
        </div>
        <div class="navigation-tabs__line" style="transition-duration: 0.3s;"/>
      </div>
    </div>
  </div>
</template>

<script>
export default {
name: "navigation-tab",
  data(){
    return{
      list:[
        {
          title:'标签1',
        },
        {
          title:'标签2',
        },
        {
          title:'标签3',
        },
        {
          title:'标签4',
        },
        {
          title:'标签5',
        },
        {
          title:'标签6',
        },
        {
          title:'标签7',
        },
      ],
      active:''
    }
  },
  props:{

  },
  watch:{

  },
  methods:{
     onClick (i){
       if(i===this.active)return
       this.active=i
       //计算滑动距离
       let arr = document.getElementsByClassName('navigation-tab--active')[i].getBoundingClientRect().left  //距离左边距离
       let brr = document.getElementsByClassName('navigation-tab--active')[0].clientWidth;                  //单个总宽
       let crr = document.getElementsByClassName('navigation-tabs__line')[0].clientWidth;                   //条总宽
       let drr = (brr-crr)/2 //单边距离
       document.getElementsByClassName('navigation-tabs__line')[0].style.transform=`translateX(${arr+drr}px)`
       // console.log( document.getElementsByClassName('navigation-tab--active').length,document.getElementsByClassName('navigat')[0].clientWidth)
       // console.log(document.getElementsByClassName('navigation-tab--active').length*brr)
     },
     getslide(wit,i){
       //滚动条滑动
       let arr = document.getElementsByClassName('navigation-tab__nav')[0].clientWidth;             //滚动总宽
       let brr = document.getElementsByClassName('navigation-tab--active').length*wit;              //实际总宽
       let crr = document.getElementsByClassName('navigation-tab--active')[0].clientWidth*(i+1);    //当前选择的实际宽度
       console.log(arr,brr)
       if(brr>arr){
         console.log(brr-crr)
         if(brr-crr>0){

         }
         }
       }
     },
mounted() {

},
}
</script>

<style scoped lang="less">
.navigat{
  position: relative;
}
.navigation-tab{
  overflow: hidden;
  height: 44px;
  .navigation-tab__nav{
    overflow-x: auto;
    overflow-y: hidden;
    padding:0 8px;
    box-sizing: content-box;
    height: 100%;
    padding-bottom: 15px;
    display: flex;
    background-color: #fff;
    user-select: none;
    transition-duration: 0.3s;
    .navigation-tab--active{
      flex: 1 0 auto;
      padding: 0 14px;
      color: #646566;
      font-weight: 500;
      font-size: 14px;
      line-height: 20px;
      cursor: pointer;
      justify-content: center;
      box-sizing: border-box;
      display: flex;
      align-items: center;
      position: relative;
    }
    .navigation-active{
      font-weight: 500;
      color: #000;
    }
    .navigation-tabs__line{
      position: absolute;
      bottom: 0;
      left: 0;
      z-index: 1;
      width: 40px;
      height: 3px;
      background-color: #ee0a24;
      border-radius: 3px;
    }
  }
}
</style>
